<template>
	<view class="orderContainer">
		<view class="navBarContainer">
			<view class="navBar">
				<view class="back" @click="goBack">
					<view class="iconContainer">
						<u-icon name="arrow-left" size="20" color="#FFF"></u-icon>
					</view>
				</view>
				<text class="title">订单详情</text>
			</view>
			<view class="allContainer">
				<view class="getFoodContainer">
					<view class="title">
						取餐号
					</view>
					<view class="content">
						{{orderDetail.takeout_number}}
					</view>
					<view class="status">
						<view class="statusContent" :style="[orderDetail.status==3?{opacity:1}:{opacity:0.5}]">
							<view class="img prepare">
								
							</view>
							<view class="des">
								准备中
							</view>
						</view>
						<view class="statusContent" :style="[orderDetail.status==4?{opacity:1}:{opacity:0.5}]">
							<view class="img get">
								
							</view>
							<view class="des">
								请取餐
							</view>
						</view>
						<view class="statusContent" :style="[orderDetail.status==5?{opacity:1}:{opacity:0.5}]">
							<view class="img finish">
								
							</view>
							<view class="des">
								已完成
							</view>
						</view>
					</view>
					<view class="warningContainer">
						<view class="title">
							请下拉页面刷新排队信息
						</view>
						<view class="more">
							请及时留意店内取餐屏
						</view>
					</view>
				</view>
				<view class="restInfo">
					<view class="restTitle">
						<view class="icon">
							<u-icon name="map-fill"></u-icon>
						</view>
						<view class="title">
							{{storeInfo.shop_name}}
						</view>
					</view>
					<view class="foodInfo">
						<view class="food" v-for="(food,index) in orderDetail.orderDetailList" :key="index">
							<view class="infoContent">
								<view class="foodImg" :style="[{backgroundImage:'url('+food.image+')'}]">
									
								</view>
								<view class="info">
									<view class="name">
										{{food.name}}
									</view>
									<view class="foodContent">
										×{{food.number}}
									</view>
								</view>
							</view>
							<view class="priceContainer">
								￥<view class="price">{{food.amount}}</view>
							</view>
						</view>
					</view>
					<view class="allPrice">
						<view class="content">
							合计<view class="price">
								￥{{orderDetail.amount}}
							</view>
						</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="title">
						订单信息
					</view>
					<view class="orderContent">
						<view class="info">
							<view class="title">
								取餐门店
							</view>
							<view class="content">
								{{storeInfo.shop_name}}
							</view>
						</view>
						<view class="info">
							<view class="title">
								下单时间
							</view>
							<view class="content">
								{{orderDetail.order_time}}
							</view>
						</view>
						<view class="info">
							<view class="title">
								订单号
							</view>
							<view class="content">
								{{orderDetail.number}}
							</view>
						</view>
						<view class="info">
							<view class="title">
								取餐方式
							</view>
							<view class="content">
								<span v-if="orderDetail.type==0">堂食</span>
								<span v-if="orderDetail.type==1">外带</span>
							</view>
						</view>
						<view class="info">
							<view class="title">
								支付方式
							</view>
							<view class="content">
								微信支付
							</view>
						</view>
						<view class="info">
							<view class="title">
								联系方式
							</view>
							<view class="content">
								{{beforePhone}}******{{afterPhone}}
							</view>
						</view>
						<view class="info">
							<view class="title">
								备注
							</view>
							<view class="content">
								<span v-if="orderDetail.remark">{{orderDetail.remark}}</span>
								<span v-else>无</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="operateContainer">
			<view class="cancelOrder" v-if="orderDetail.status==3" @click="cancelOrder()">
				<view>
					申请退款
				</view>
			</view>
			<view class="more" @click="gotoMenu">
				<view>
					继续点餐
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="center">
			<view class="popContent">
				<view class="title">
					请填写原因
				</view>
				<view class="inputContent">
					<u--input
					    placeholder="请输入原因"
					    border="surround"
					    v-model="cancelContent"
					  ></u--input>
				</view>
				<view class="cancelOperateContainer">
					<view class="cancelBtn" @click="cancel">返回</view>
					<view class="confirmBtn" @click="confirm(orderDetail.id)"
					>确定</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				orderDetail:'',
				beforePhone:'',
				afterPhone:'',
				show:false,
				cancelContent:'',
				storeInfo:''
			}
		},
		methods: {
			close(){
				this.show=false
			},
			goBack(){
				uni.navigateTo({
					url:'./orderMeal'
				})
			},
			gotoMenu(){
				uni.navigateTo({
					url:'./orderMeal'
				})
			},
			cancel(){
				this.show=false
			},
			cancelOrder(){
				this.show=true
			},
			confirm(id){
				if(this.cancelContent){
					uni.request({
						url:`http://localhost:8080/kfc//user/order/cancel?id=${id}&cancelReason=${this.cancelContent}`,
						method:'get',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('取消成功',res.data)
							this.show=false
							this.$refs.uToast.show({
								type: 'success',
								title: '取消成功',
								message: "感谢您提出的建议，我们将继续努力！",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
								complete(){
									uni.navigateTo({
										url:'../homePage/homePage'
									})
								}
							})
						}
					})
				}
				else{
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						title: '请输入取消原因',
						message: '请输入取消原因',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					})
				}
			}
		},
		mounted(){
			uni.request({
				url:`http://localhost:8080/kfc/user/order/detail?id=${this.id}`,
				method:'get',
				header:{
					token:uni.getStorageSync('STATE_KEY').token
				},
				success:(res)=>{
					console.log('订单详情',res.data.data)
					this.orderDetail=res.data.data
					this.beforePhone=this.orderDetail.phone.slice(0,3)
					this.afterPhone=this.orderDetail.phone.slice(9)
				}
			})
			uni.request({
				url:'http://localhost:8080/kfc/shop',
				method:'get'
			}).then(res=>{
				console.log('店铺信息',res.data.data)
				this.storeInfo=res.data.data
			})
		},
		onLoad:function(options){
			this.id=options.id
		},
		onPullDownRefresh(){
			uni.request({
				url:`http://localhost:8080/kfc/user/order/detail?id=${this.id}`,
				method:'get',
				header:{
					token:uni.getStorageSync('STATE_KEY').token
				},
				success:(res)=>{
					console.log('订单详情',res.data.data)
					this.orderDetail=res.data.data
					this.beforePhone=this.orderDetail.phone.slice(0,3)
					this.afterPhone=this.orderDetail.phone.slice(9)
				}
			})
			this.$forceUpdate()
		}
	}
</script>

<style>
	page{
		background-color: rgb(245,245,245);
	}
</style>

<style lang="scss" scoped>
	.orderContainer{
		.navBarContainer{
			width: 100vw;
			height: 300rpx;
			background-color: rgb(245,245,245);
			// display: flex;
			// align-items: center;
			// margin-top: 30rpx;
			background-color: rgb(228,0,48);
			position: relative;
			.navBar{
				width: 90%;
				margin: 0 auto;
				padding-top: 100rpx;
				display: flex;
				align-items: center;
				color:#FFF;
				.back{
					width: 70rpx;
				}
				.title{
					font-size: 30rpx;
					// margin-left: 30rpx;
				}
			}
			.allContainer{
				position: absolute;
				width: 720rpx;
				left: 15rpx;
				top:220rpx;
				>view{
					width: 100%;
					background-color: #FFF;
					border-radius: 15rpx;
					margin-bottom: 20rpx;
				}
				.getFoodContainer{
					display: flex;
					flex-direction: column;
					align-items: center;
					>.title{
						margin-top: 30rpx;
						color:#999999;
						font-size: 28rpx;
					}
					>.content{
						font-size: 60rpx;
						font-weight: bold;
						margin-top: 20rpx;
						color:rgb(232,48,87);
					}
					.status{
						margin-top: 40rpx;
						width: 400rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.statusContent{
							display: flex;
							flex-direction: column;
							align-items: center;
							.img{
								width: 60rpx;
								height: 60rpx;
								// background-color: aliceblue;
								background-position: center;
								background-size: contain;
								background-repeat: no-repeat;
							}
							.prepare{
								background-image: url(../../static/orderMeal/prepaer.png);
							}
							.get{
								background-image: url(../../static/orderMeal/out.png);
							}
							.finish{
								background-image: url(../../static/orderMeal/finish.png);
							}
							.des{
								font-size: 24rpx;
								margin-top: 7rpx;
								font-weight:bold;
							}
						}
					}
					.warningContainer{
						margin-top: 30rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						>.title{
							font-size: 28rpx;
						}
						.more{
							font-size: 24rpx;
							color:#999999;
							margin-top: 10rpx;
							margin-bottom: 40rpx;
						}
					}
				}
				.restInfo{
					display: flex;
					flex-direction: column;
					.restTitle{
						display: flex;
						align-items: center;
						margin-left: 20rpx;
						margin-top: 30rpx;
						border-bottom: 1px solid rgb(217,217,217);
						.icon{
							margin-bottom: 30rpx;
						}
						>.title{
							font-size: 28rpx;
							font-weight: bold;
							margin-left: 10rpx;
							margin-bottom: 30rpx;
						}
					}
					.foodInfo{
						display: flex;
						flex-direction: column;
						width: 680rpx;
						margin: 0 auto;
						margin-top: 20rpx;
						.food{
							width: 100%;
							margin-bottom: 30rpx;
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							.infoContent{
								display: flex;
								.foodImg{
									width: 120rpx;
									height: 80rpx;
									// background-color: aliceblue;
									background-position: center;
									background-size: cover;
									background-repeat: no-repeat;
								}
								.info{
									margin-left: 10rpx;
									display: flex;
									flex-direction: column;
									.name{
										font-size: 28rpx;
									}
									.foodContent{
										margin-top: 6rpx;
										margin-bottom: 6rpx;
										display: flex;
										flex-direction: column;
										.showContent{
											font-size: 22rpx;
											color:#999999;
										}
										font-size:26rpx;	
									}
								}
							}
							.priceContainer{
								display: flex;
								align-items: flex-end;
								font-weight: bold;
								font-size: 24rpx;
								.price{
									font-size: 28rpx;
								}
							}
						}
					}
					.allPrice{
						width: 680rpx;
						margin: 0 auto;
						display: flex;
						justify-content: flex-end;
						margin-bottom: 30rpx;
						.content{
							font-size: 28rpx;
							display: flex;
							.price{
								font-size: 30rpx;
								font-weight: bold;
							}
						}
					}
				}
				.orderInfo{
					overflow: hidden;
					margin-bottom: 200rpx;
					>.title{
						margin-top: 30rpx;
						margin-left: 20rpx;
						font-weight: bold;
						font-size: 32rpx;
						padding-bottom: 20rpx;
						border-bottom: 1px solid rgb(217,217,217);
					}
					.orderContent{
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 30rpx;
						.info{
							width: 680rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 30rpx;
							.title{
								color:#999999;
								font-size: 26rpx;
							}
							.content{
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
		.operateContainer{
			width: 100vw;
			background-color: #FFF;
			position: fixed;
			left: 0;
			bottom: 0;
			height: 150rpx;
			display: flex;
			justify-content: flex-end;
			border-top: 1px solid rgb(217,217,217);
			.cancelOrder{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160rpx;
				height:80rpx;
				border-radius: 10rpx;
				>view{
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					font-size: 26rpx;
				}
				border: 1px solid #999999;
			}
			.more{
				margin-top: 20rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color:#FFF;
				width: 160rpx;
				background-color: rgb(228,0,48);
				height:80rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
				>view{
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					font-size: 26rpx;
				}
			}
		}
	}
	.popContent{
		display: flex;
		flex-direction: column;
		align-items: center;
		.title{
			margin-top: 40rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			font-size: 36rpx;
		}
		.inputContent{
			margin-top: 30rpx;
			width: 400rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
		.cancelOperateContainer{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			>view{
				width: 120rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}
			.cancelBtn{
				border: 1px solid #999999;
			}
			.confirmBtn{
				border:1px solid rgb(228,0,48);
				background-color: rgb(228,0,48);
				color:#FFF;
				margin-left: 30rpx;
			}
		}
	}
</style>
